<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情页面</title>
		<link rel="stylesheet" type="text/css" href="../css/head_footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
	</head>
	<body id="details">
		<!--版心-->
		<div id="container" class="center">
			<!--头部 - 上半部分-->
			<div class="head_top">
				<div class="box">
					<!--头部左侧logo图-->
					<h1 class="left"><a href="http://127.0.0.1/YJProject/client/homepage.html" title="优集品"><img src="../images/home/header/logo.png"/></a></h1>

					<div class="right" id="search_box">
						<!--头部右侧模块-->
						<ul class="ul right">
							<li class="li1">
								<a href="##"><img src="../images/home/header/search.png" alt="" /></a>
							</li>
							<li class="li2">
								<a href="##"><img src="../images/home/header/phone.png" title="下载APP" /></a>
							</li>
							<li class="li3 cart">
								<a href="car.html"><img src="../images/home/header/cart.png" title="购物袋" /></a>
								<div class="count"><span>0</span></div>
							</li>
							<li class="li4">
								<a href="##"><img src="../images/home/header/persen.png" title="个人中心" /></a>
							</li>

							<div class="ewm "><img src="../images/home/header/app_code.png" alt="" /></div>

						</ul>

						<form class="right">
							<input type="text" name="" id="txt" placeholder="搜索" />

						</form>

						<ul class="" id="hot_list">
							<li>
								<a href="http://www.baidu.com">创意</a>
							</li>
							<li>
								<a href="javascript:;">香蕉</a>
							</li>
							<li>
								<a href="javascript:;">面膜</a>
							</li>
							<li>
								<a href="javascript:;">天然</a>
							</li>
							<li>
								<a href="javascript:;">瑞典</a>
							</li>
							<li>
								<a href="javascript:;">美妙乐事</a>
							</li>
							<li>
								<a href="javascript:;">抱枕</a>
							</li>
							<li>
								<a href="javascript:;">天然</a>
							</li>
							<li>
								<a href="javascript:;">瑞典</a>
							</li>
							<li>
								<a href="javascript:;">美妙乐事</a>
							</li>
							<li>
								<a href="javascript:;">抱枕</a>
							</li>
						</ul>

					</div>
				</div>

			</div>
			<!--头部吸顶菜单-->
			<div class="head_bottom">
				<div class="menu">
					<ul class="left">
						<li>
							<a href="##">首页</a>
						</li>
						<li>
							<a href="##">新品</a>
						</li>
						<li>
							<a href="##">美味餐厨</a>
						</li>
						<li>
							<a href="##">家纺家饰</a>
						</li>
						<li>
							<a href="##">生活日用</a>
						</li>
						<li>
							<a href="##">健康美体</a>
						</li>
						<li>
							<a href="##">文具数码</a>
						</li>
						<li>
							<a href="##">全球购</a>
						</li>
						<li>
							<a href="##">品牌</a>
						</li>
					</ul>

					<div class="right kefu">
						<a href="###">联系客服</a>
					</div>

					<div class="right cart">
						<a href="car.html"><img src="../images/home/header/cart.png" /></a>
						<div class="count"><span>0</span></div>
					</div>

				</div>
				<!--隐藏 的下拉菜单-->
				<div class="d">
					<ul>
						<li>
							<a href="##">烹饪锅具</a>
						</li>
						<li>
							<a href="##">厨房工具</a>
						</li>
						<li>
							<a href="##">厨房电器</a>
						</li>
						<li>
							<a href="##">餐具桌面</a>
						</li>
						<li>
							<a href="##">水具酒具</a>
						</li>
						<li>
							<a href="##">咖啡茶具</a>
						</li>
						<li>
							<a href="##">烘焙烧烤</a>
						</li>
					</ul>

				</div>
				<div class="d">
					<ul>
						<li>
							<a href="##">家纺</a>
						</li>
						<li>
							<a href="##">装饰</a>
						</li>

					</ul>

				</div>

				<div class="d">
					<ul>
						<li>
							<a href="##">清洁</a>
						</li>
						<li>
							<a href="##">收纳</a>
						</li>
						<li>
							<a href="##">雨具</a>
						</li>
						<li>
							<a href="##">生活电器</a>
						</li>
						<li>
							<a href="##">颈枕口罩</a>
						</li>
						<li>
							<a href="##">宠物用品</a>
						</li>
						<li>
							<a href="##">保暖防护</a>
						</li>
					</ul>

				</div>

				<div class="d">
					<ul>
						<li>
							<a href="##">口腔护理</a>
						</li>
						<li>
							<a href="##">全身护理</a>
						</li>
						<li>
							<a href="##">面部护理</a>
						</li>
						<li>
							<a href="##">头发护理</a>
						</li>
						<li>
							<a href="##">女性护理</a>
						</li>
						<li>
							<a href="##">千体塑身</a>
						</li>
						<li>
							<a href="##">膳食补充</a>
						</li>
					</ul>

				</div>

				<div class="d">
					<ul>
						<li>
							<a href="##">笔记手账</a>
						</li>
						<li>
							<a href="##">书写工具</a>
						</li>
						<li>
							<a href="##">办公收纳</a>
						</li>
						<li>
							<a href="##">贺卡包装</a>
						</li>
						<li>
							<a href="##">数码配件</a>
						</li>
						<li>
							<a href="##">耳机/音响</a>
						</li>
						<li>
							<a href="##">摄影相关</a>
						</li>
					</ul>

				</div>

			</div>
		<!--详情页主要内容   main 部分	-->
			<div id="details_main">
				<div class="path">
					<a href="homepage.html">首页</a>
					<i>-></i>
					<a href="###">健康美体</a>
					<i>-></i>
					<a href="###">面部护理</a>
					<i>-></i>
					<a href="###">护肤</a>
					<i>-></i>
					<a href="###">[ 油皮强推之选  ] CPB肌肤之钥 钻石隔离妆前乳SPF24PA++ 清爽型 30ml</a>
					
				</div>
				<!--商品展示和 放大镜部分-->
				
				<div class="goods">
					<!--左侧 放大镜-->
					<div class="g-left left">
						<div class="smallbox">
							<!--<img src="../images/details/fdj/img1.jpg" alt="" />-->
							<div class="fdj"></div>
						</div>
						<div class="bigbox">
							<!--<img src="../images/details/fdj/img1.jpg" alt="" />-->
						</div>
						<div class="tab">
							<ul>
								<!--<li><img src="../images/details/fdj/img1.jpg"/></li>
								<li><img src="../images/details/fdj/img2.jpg"/></li>
								<li><img src="../images/details/fdj/img3.jpg"/></li>
								<li><img src="../images/details/fdj/img4.jpg"/></li>
								
								<li><img src="../images/details/fdj/img1.jpg"/></li>
								<li><img src="../images/details/fdj/img2.jpg"/></li>
								<li><img src="../images/details/fdj/img3.jpg"/></li>
								<li><img src="../images/details/fdj/img4.jpg"/></li>-->
							</ul>
							
							<div class="lbtn btn">
								<p></p>
								<img src="../images/details/fdj/btn_left.png"/>
							</div> 
							
							<div class="rbtn btn">
								<p></p>
								<img src="../images/details/fdj/btn_right.png"/>
							</div> 
						</div>
						
					</div>
					
					<!--右侧商品部分-->
					<div class="g-right right" pid="2001">
						<h5 class="g-title">[ 油皮强推之选 ] CPB肌肤之钥 钻石隔离妆前乳SPF24PA++ 清爽型 30ml</h5>
						<ul class="g-content">
							<li class="li1"><a href="###">商品品牌：<span class="g-brand">CPB 肌肤之钥[日本]</span></a></li>
							<li class="li2">优选价<span class="act-price">¥360.00</span></li>
							<li class="li3">市场价<span class="mark-price">¥400.00</span></li>
							<li class="g-color">
								<dl>
									<dd>颜色：</dd>
									<dt>
										<ul>
											<li title="清爽型" class="on active">
												<img src="http://127.0.0.1:80/YJProject/images/details/fdj/img1.jpg"/>
											</li>
										</ul>
									</dt>
								</dl>
							</li>
							
							<li class="g-size">
								<dl>
									<dd>尺码：</dd>
									<dt class="active">30g</dt>
								</dl>
							</li>
							
							<li class="g-num">
								<dl>
									<dd>数量：</dd>
									<dt>
										<p>
											<span class="down">-</span>
											<input type="text" value="1" readonly="readonly"/>
											<span class="up">+</span>
										</p>
									</dt>
								</dl>
							</li>
							
							<li class="tishi">
								<dl>
									<dd>提示：</dd>
									<dt>
										<ul>
											<li class="red"></li>
											<li class="txt">香港保税仓发货</li>
											
											<li class="red"></li>
											<li class="txt">售价含税</li>
											
											<li class="red"></li>
											<li class="txt">满额包邮</li>
										</ul>
									</dt>
								</dl>
								
							</li>
						</ul>
						
						<div class="g-collect">
							<span class="coll">收藏</span>
							<a href="###" class="buy"></a>
							<span class="add">
								<img src="../images/details/fdj/shopping-bag.png"/>
								加入购物袋
							</span>
						</div>
						
					</div>
				</div>
				
				<!--商品详情开始-->
				<div class="shop-details">
					<!--左边部分-->
					<div class="detail-left left">
						<h4>热门推荐</h4>
						<!--one-->
						<a href="###">
							<dl>
								<dt><img src="../images/details/detai_left/4bb80c876a953ad1a6586ef798299a8b.jpg"/></dt>
								<dd>
									<p>宝宝房专用清洁剂</p>
									<span>￥102.00</span>
								</dd>
							</dl>
						</a>
						
						<a href="###">
							<dl>
								<dt><img src="../images/details/detai_left/4bb80c876a953ad1a6586ef798299a8b.jpg"/></dt>
								<dd>
									<p>宝宝房专用清洁剂</p>
									<span>￥102.00</span>
								</dd>
							</dl>
						</a>
						
						<a href="###">
							<dl>
								<dt><img src="../images/details/detai_left/4bb80c876a953ad1a6586ef798299a8b.jpg"/></dt>
								<dd>
									<p>宝宝房专用清洁剂</p>
									<span>￥102.00</span>
								</dd>
							</dl>
						</a>
						
						<a href="###">
							<dl>
								<dt><img src="../images/details/detai_left/4bb80c876a953ad1a6586ef798299a8b.jpg"/></dt>
								<dd>
									<p>宝宝房专用清洁剂</p>
									<span>￥102.00</span>
								</dd>
							</dl>
						</a>
						
						<a href="###">
							<dl>
								<dt><img src="../images/details/detai_left/4bb80c876a953ad1a6586ef798299a8b.jpg"/></dt>
								<dd>
									<p>宝宝房专用清洁剂</p>
									<span>￥102.00</span>
								</dd>
							</dl>
						</a>
						
					</div>
					<!--右边部分-->
					<div class="detail-right right">
						<div id="detail_menu">
							<!--商品详情-->
							<a href="#detail_message" class="detail active">商品详情</a>
							<!--品牌介绍-->
							<a href="#detail_bank" class="rec">品牌介绍</a>
						</div>
						<ul class="detail-message" id="detail_message">
							<li>
								<p>保质期</p>
								<span>3年（具体以实物为准）</span>
							</li>
							<li>
								<p>含量</p>
								<span>30g</span>
							</li>
							
							<li>
								<p>原产地</p>
								<span>日本</span>
							</li>
							
							<li>
								<p>适合肤质</p>
								<span>任何肌肤</span>
							</li>
							
							<li>
								<p>净重</p>
								<span>54g</span>
							</li>
						</ul>
						
						<div class="detail-show">
							<dl class="dl1">
								<dt><img src="../images/details/detail_right/dr1.jpg"/></dt>
							</dl>
							<dl class="dl2">
								<dt><img src="../images/details/detail_right/dr2.jpg"/></dt>
								<dd>
									<p>
										亮肤型妆前乳，迅速提升肌肤明亮度与透明感，瞬间遮盖微小细纹、毛孔，改善肤色不均，轻薄妆感，放佛天生好皮肤，实现滑嫩素颜肌。
									</p>
									<span>
										全新自体造光技术，增加角质层保湿度，使肌肤由内而外绽放光采，将粉底「光层」效果发挥到极致。
									</span>
								</dd>
							
							</dl>
							<dl class="dl3">
								<dt><img src="../images/details/detail_right/dr3.jpg"/></dt>
								<dd>
									<p>
										预防暗沉及出油造成的脱妆，添加品牌核心成分亮肌复合精华，S玻尿酸，修护保养，帮助肌肤维持在光透水嫩弹润状态。
									</p>
									<span>
										高质感乳液般的滑瞬触感，让肌肤达到保湿状态。
									</span>
								</dd>
							
							</dl>
							<div class="use_method">
								<h3>使用 方法</h3>
								<ul>
									<li>
										请在护肤步骤后使用，取适量于指尖，分别点于两颊、额头、鼻子、下巴等五处，均匀涂抹于全脸。
									</li>
									<li>
										请在确保保湿露完全服帖后，再使用后续粉底产品。
									</li>
								</ul>
							</div>
							
							<div class="use_method">
								<h3>注意事项</h3>

								<ul>
									<li>
										此商品预计下单后 72 小时内发货。
									</li>
									<li>
										凡包含此款商品的订单，均不支持货到付款。
									</li>
									<li>除运输途中造成的损坏及商品本身质量问题，此商品不支持 7 天内无条件退换货。</li>
								</ul>
							</div>
							
							
							<dl class="dl4" id="detail_bank">
								<dt><img src="../images/details/detail_right/dr4.jpg"/></dt>
							</dl>
						</div>
						
					</div>
				</div>
				
				
				
			</div>
		
		
		
		
		
		
		
		
		
		<!--网页底部  尾部-->
			
			<div id="kefu_back">
					<!--联系客服开始-->
				<div id="contact_service" class="contact_service">
					<img src="../icon/Contact_service.png"/>
				</div>
				
				<!--返回顶部-->
				<div id="back_top" class="back_top">
					<img src="../icon/backT.png"/>
					<div class="back_top_word">
						返回顶部
					</div>
					
				</div>
				
			</div>
			
			<!--在线客服 聊天 框-->
				<div id="online_kefu" class="">
					<div id="chat_content">
						<div class="chat_top">
							<h4>在线客服</h4>
						</div>
						<div class="talk">
							<ul>
								
								<li class="left li2"><span>请对我的服务做出评价</span></li>
								<div style="clear: both;"></div>
								
								<li class="pjia left"><span>立即评价</span></li>
								<div style="clear: both;"></div>
								
								<li class="left li3"><span>亲爱的，欢迎来到优集品哟~大量新品等着你~么么哒~</span></li>
								<div style="clear: both;"></div>
								

							</ul>
							
							<div class="shuru">
								<textarea name="" rows="2" cols="40" id="txt"></textarea>
								<a href="javascript:;" id="send">发送</a>
							</div>
						</div>
						
					</div>
					
					<div class="shut">
						<div class="minus"></div>
					</div>
					
				</div>
			
			
			<!--网页结尾部分-->
			<div id="footer" class="footer">
				<ul class="footer_help">
					<li class="li1"><a href="###">关于优集品</a></li>
					<li class="li2"><a href="###">购物指南</a></li>
					<li class="li3"><a href="###">消费者告知书</a></li>
					<li class="li4"><a href="###">常见问题</a></li>
				</ul>
				<div class="website_information">
					<ul class="website_information_left left">
						<li class="kefu">客服电话4000-788-738</li>
						<li>优集品© 2011-2016</li>
						<li>北京优集品网络科技有限公司</li>
						<li>京ICP备11028595号</li>
						<li>京公网安备110105011117</li>
					</ul>
					
					<div class="website_information_right right">
						<dl>
							<dt class="left">关注优集品</dt>
							<dd class="left">
								<img src="../icon/weixin.png"/>
								<div><img src="../images/home/header/app_code.png"/></div>
							</dd>
						</dl>
					</div>
					
				</div>
				
			</div>
		
		<!--底部结束-->
		
		</div>
		
		<div id="bigbox">
			
		</div>
		<div id="smallbox">加入购物袋成功</div>
		
		
	
<script src="../library/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../library/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/goods.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/home/home.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/details.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
